<template>
    <!-- 搜索 -->
    <el-select v-model="searchKey" clearable filterable remote placeholder="请输入姓名搜索" :remote-method="remoteMethod"
        @change="searchChange" :loading="searchlLoading" @clear="clearSearchKey">
        <el-option v-for="item in searchOptions" :key="item.value" :label="item.label" :value="item.value" />

    </el-select>
    <!-- 添加按钮 -->
    <el-button :icon="Search"></el-button>
    <el-button type="primary" @click="addStu">添加项目</el-button>
    <!-- 展示数据 -->
    <el-table :data="tableData" border style="width: 100%" v-loading="tableLoading">
        <el-table-column prop="headimgurl" align="center" label="头像">
            <template v-slot="{ row }">
                <el-avatar size="large" shape="square" :src="row.headimgurl"></el-avatar>
            </template>

        </el-table-column>
        <el-table-column prop="name" align="center" label="姓名" />
        <el-table-column prop="degree" align="center" label="学历" />
        <el-table-column prop="class" align="center" label="班级" />
        <el-table-column prop="productUrl" align="center" label="项目" />
        <el-table-column prop="cTime" align="center" label="创建时间" />
        <el-table-column prop="address" align="center" label="操作">
            <template v-slot="{ row }">
                <el-button type="success" :icon="View" circle />
                <el-button type="primary" :icon="Edit" @click="edit(row)" circle />
                <el-button type="danger" :icon="Delete" @click="del(row)" circle />
            </template>

        </el-table-column>

    </el-table>
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" :page-size="pageSize" :current-page="currentPage"
        @current-change="pageChange" :total="total" />
    <!-- dislog弹窗组件 -->
    <qf-dialog :dialogFormData="dialogFormData" :visible="dialogVisible" :title="dialogTitle" @closed="close"
        @dialogCancel="dialogCancel" @validateSuccess="dialogFormValidateSuccess">
        <template v-slot:upload>
            <el-upload class="avatar-uploader" v-loading="uploadLoading" method="post" action="/api/students/uploadStuAvatar"
                :show-file-list="false" name="headimgurl" :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
        </template>
    </qf-dialog>
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue'
import { Search, Delete, Edit, View, Plus } from '@element-plus/icons-vue'
import * as api from "@/api/student"
import qfDialog from "@/components/dialog/index.vue"
import { ElMessage,ElMessageBox } from 'element-plus'
//搜索关键字
let searchKey = ref("")
//搜索的加载动画
let searchlLoading = ref(false)
//搜索框输入后触发的方法，这里负责呈现搜索的联想数据
let remoteMethod = async (currentKeyword) => {
    if (!currentKeyword) {
        return
    }
    // tableLoading.value = true
    searchlLoading.value = true
    // let key = searchKey.value ? searchKey.value : currentKeyword
    // console.log(key);
    // console.log(currentKeyword);
    try {
        //要搜索全部的数据，所以传递空字符count，默认搜索全部
        let res = await api.searchStuListApi(currentKeyword, "")
        //给联想的列表进行赋值操作
        let repeatDatas = res.data.data.map(item => ({ value: item.name }))
        //去重操作
        let norepeatDatas = []

        for (var i = 0; i < repeatDatas.length; i++) {
            //声明一个开关
            let flag = true
            for (var j = 0; j < norepeatDatas.length; j++) {
                if (repeatDatas[i].value === norepeatDatas[j].value) {
                    flag = false;
                    break;
                }
            }
            if (flag) {
                norepeatDatas.unshift(repeatDatas[i])
            }
        }
        // console.log(repeatDatas);
        // console.log(norepeatDatas);
        //去重之后对options进行赋值操作
        searchOptions.value = norepeatDatas
        tableData.value = res.data.data
        // tableLoading.value = false
        searchlLoading.value = false
    } catch (e) {
        console.log(e);
        // tableLoading.value = false
        searchlLoading.value = false
    }
}
//清空关键字之后的方法
let clearSearchKey = () => {
    // console.log(currentPage.value);
    //初始化数据，让页码回到第一页
    currentPage.value = 1
}
//用户选择了输入框的值之后，负责更新表格数据
let searchChange = async (key, page = 1, count = 10) => {
    tableLoading.value = true
    //清空上次搜索的内容
    searchOptions.value = []
    //用户点选的值
    console.log(searchKey.value);
    try {
        let res = await api.searchStuListApi(searchKey.value, count, page)
        //对表格数据的操作，将搜索的结果赋值给表格
        tableData.value = res.data.data
        tableLoading.value = false
        //对搜索的结果进行分页
        setPageNation(res.data.total)
        // console.log(searchKey.value);
    } catch (e) {
        console.log(e);
        tableLoading.value = false
    }
}
//搜索的数据
let searchOptions = ref([])
//表格数据
let tableData = ref([])
//加载动画
let tableLoading = ref(true)
//封装一个方法，专门用于获取表格数据
let getStulist = async (page, count, classes) => {
    tableLoading.value = true
    try {
        let res = await api.getStuListApi(page, count, classes)
        tableData.value = res.data.data
        tableLoading.value = false
        // console.log(res);
        setPageNation(res.data.total)
    } catch (e) {

        console.log(e);
        tableLoading.value = false
    }
}
//处理分页器
//当前的页码
// let currentPage = ref()
//分页器的total属性
let total = ref(1)
console.log(total);
//默认的页码
let currentPage = ref(1)
//一页展示多少条
let pageSize = ref(10)
// console.log(pageSize);
//页码变更的时候
let pageChange = (inputCurrentPage) => {
    // console.log(current);
    //动态变更页码
    currentPage.value = inputCurrentPage
    //判断有没有搜索关键字，如果有，那么应该更新搜索的分页结果
    if (searchKey.value) {
        searchChange(null, inputCurrentPage)
    } else {
        //不然就拉取列表全部的数据
        getStulist(inputCurrentPage)
    }
}
//专门修改分页器内容的方法
let setPageNation = (totalCount = 10, count = 10, currentPage = 1) => {
    total.value = totalCount
    console.log(totalCount);

    pageSize.value = count
    console.log(count);
}

//添加stu信息
//声明dialogVisible控制dialog
//dialog标题
let dialogTitle = ref('增加数据')
let dialogVisible = ref(false)
let addStu = () => {
    //打开dialog
    dialogVisible.value = true
    dialogTitle.value = '增加数据'
}
//dialog的数据源
let dialogFormData = reactive(
    {
        class: {
            label: "班级",
            value: ""
        },
        name: {
            label: "姓名",
            value: ""
        },
        age: {
            label: "年龄",
            value: ""
        },
        city: {
            label: "城市",
            value: ""
        },
        degree: {
            label: "学历",
            value: ""
        },
        productUrl: {
            label: "项目地址",
            value: ""
        },
        description: {
            label: "描述",
            value: ""
        },

    }
)
//dialog点击了确定按钮，并且表单校验通过触发的逻辑
let dialogFormValidateSuccess = async (form) => {
    // console.log(valid);
    //发起请求，将输入的内容传递给服务器
    console.log(dialogFormData);
    let message = "添加成功"
    let params = {
        headimgurl: '',
        class: dialogFormData.class.value,
        name: dialogFormData.name.value,
        age: dialogFormData.age.value,
        city: dialogFormData.city.value,
        degree: dialogFormData.degree.value,
        productUrl: dialogFormData.productUrl.value,
        description: dialogFormData.description.value,
    }
    try {
        let apiMethod = null
        switch (dialogTitle.value) {
            case '增加数据':
                apiMethod = api.addStuApi;
                //删除sId这条属性
                params.sId ? delete params.sId : ""
                break;
            case '编辑数据':

                apiMethod = api.updateStuApi;
                //给params中添加sId属性
                params.sId = sId.value
                //更改提示信息 
                message = "修改成功"
        }
        //判断是否上传头像，如果上传了，那么携带到params中去
        params.headimgurl = headimgurl.value ? headimgurl.value : ""

        let res = await apiMethod(params)
        console.log(res);
        //根据dialogTitle来区分要发送编辑请求话说发送增加请求
        //添加成功
        //1.提示添加成功
        ElMessage({
            type: 'success',
            message
        })
        //2.关掉dialog
        dialogVisible.value = false
        //3.清掉表单
        form.value.resetFields()
        //4.更新列表
        console.log(res);
        getStulist()
    } catch (e) {
        ElMessage({
            type: 'error',
            message: e.toString()
        })
        console.log(e);
    }
}
//点击dialog取消按钮触发的逻辑
let dialogCancel = () => {
    console.log('已经取消');
    dialogVisible.value = false
}
//dialog关闭后，要同步控制关闭属性的值
//目的的是为了处理点击空白区域或者右上角叉叉时，造成的后续dialog不能弹出的情况
let close = () => {
    dialogVisible.value = false
    //将数据清空
    let keys = Object.keys(dialogFormData)
    keys.forEach(key => {
        dialogFormData[key].value = ""
    })
    //清空头像的回显
    imageUrl.value = ""
     
}
//编辑(编辑的逻辑主要是数据的一个回显)
//声明一个变量，存储sId，便于编辑时传递给后端
let sId = ref("")
let edit = (row) => {
    //1.打开dialog
    dialogVisible.value = true
    //2.修改标题
    dialogTitle.value = '编辑数据'
    console.log(row);
    //2.数据需要回显
    let keys = Object.keys(dialogFormData)
    keys.forEach(key => {
        dialogFormData[key].value = row[key]
    })
    //给sId赋值
    sId.value = row.sId
    //跟改全局的headimgurl这个字段，便于数据的回显操作
    headimgurl.value = row.headimgurl
    imageUrl.value = row.headimgurl
}
//删除
let del = (row) => {
    //获取当前这条数据的id，传递给后台
    //1.交互，让客户确认是否删除
ElMessageBox.confirm('此操作将永久删除' + row.name +'，是否继续?','删除提示',{
    confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
})
.then(async()=>{
//2.发请求，删除数据
try{
    let res = await api.delStuApi(row.sId)
ElMessage({
    type:'success',
    message:'删除成功' 
})
//更新列表
getStulist()
}catch(e){
    ElMessage({
    type:'error',
    message:e.toString() 
})
}

})
.catch(()=>{
    ElMessage({
        type:'warning',
        message:'已取消删除'
    })
})
    

}
//上传文件
//一个保存上传地址的变量
let imageUrl = ref()
//声明一个headimgurl变量，用于将参数在表单dialog通过的时候，一并提交给后台
let headimgurl = ref("")
//头像加载动画
let uploadLoading = ref(false)
//上传成功的方法
let handleAvatarSuccess = (res, uploadFile) => {
    if (res.state) {
        //头像上传成功
        ElMessage({
            type: 'success',
            message: res.msg
        })
        headimgurl.value = res.headimgurl
    } else {
        ElMessage({
            type: 'error',
            message: res.msg
        })
    }
    //关闭动画
    uploadLoading.value= false
    console.log(res);
    console.log(uploadFile.raw);
    imageUrl.value = URL.createObjectURL(uploadFile.raw)
}
//上传之前

let beforeAvatarUpload = (rawFile) => {
    
    console.log(rawFile.type);
    //允许上传的文件类型
    let acceptType = ['image/jpeg', 'image/png']
    let isAccept = acceptType.includes(rawFile.type)
    //判断当前上传的文件类型是否包含在上面的数组中
    if (!isAccept) {
        ElMessage.error('上传的文件类型只能是jpeg或png类型，您当前上传的文件类型是' + rawFile.type)
        return false
    } else if (rawFile.size / 1024 / 1024 > 1) {
        ElMessage.error('上传的文件不能超过1M')
        return false
    }
    //打开头像加载动画
    uploadLoading.value= true
    return true
}
onMounted(() => {
    getStulist()
})

</script>
<script>
export default {
    meta: {
        title: 'xyxmgl',
        name: '学员项目管理',
        routeName: 'product',
        icon: 'icon-shangpinguanli'
    }
}
</script>
<style lang="less" scoped>
.el-table {
    margin: 20px 0;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>